<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>报销单列表</title>
    <script src="<%=basePath%>common/jquery/jquery-1.9.0.js"></script>
    <script src="<%=basePath%>common/layui/layui.all.js"></script>
    <script src="<%=basePath%>common/common.js"></script>
    <link rel="stylesheet" href="<%=basePath%>common/layui/css/layui.css">
    <style>
    </style>
</head>
<body><fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>报销单列表</legend>
</fieldset>
<div id="content">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用餐日期:</label>
                <div class="layui-input-inline">
                    <input type="text" id="mealTime" name="mealTime"  autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">用餐人员:</label>
                <div class="layui-input-inline">
                    <input type="text" id="mealPersons" name="mealPersons" placeholder="请输入用餐人员" autocomplete="off" class="layui-input">
                </div>
            </div>
        <%--</div>
        <div class="layui-form-item">--%>
            <div class="layui-inline">
                <label class="layui-form-label">发票总额:</label>
                <div class="layui-input-inline">
                    <input type="text" id="billAllPrice" name="billAllPrice"   placeholder="请输入发票总额" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">付款人:</label>
                <div class="layui-input-inline">
                    <input type="text" name="payer" id="payer"   placeholder="请输入付款人" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <a id="search" class="layui-btn"   onclick="query()">查询</a>
                <button type="reset" class="layui-btn layui-btn-primary" onclick="reset()">重置</button>
                <button type="button" class="layui-btn layui-btn-normal" onclick="addBill()">增加发票信息</button>
            </div>
        </div>
</div>
<table class="layui-hide" id="showBillInfo" lay-filter="demo"></table>

<script type="text/html" id="barDemo" class="demoTable">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'table'], function () {
        var form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate
            , laytable = layui.table;
        laydate.render({
            elem: '#mealTime' //指定元素
        });
        laytable.render({
            elem: '#showBillInfo'
            , url: webPath + '/bill/queryBillList'
            , id: 'testReload'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , page:true
            , totalRow: true
            , method:"POST"
            , cols: [[
                {type: 'numbers', title: '序号', totalRowText: '合计'}
                ,{field: 'billNum', title: '报销单号',width:150}
                , {field: 'mealTime', title: '用餐日期', sort: true}
                , {field: 'mealPersons', title: '用餐人员'}
                , {field: 'personNum', title: '人数',width:65} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'billAllPrice', title: '发票总额', sort: true, totalRow: true}
                , {field: 'payAllPrice', title: '付款总额', sort: true, totalRow: true}
                , {field: 'reimbursementPrice', title: '报销总额', sort: true, totalRow: true}
                , {field: 'payer', title: '付款人', sort: true}
                , {field: 'updateTime', title: '创建时间', sort: true}
                , { fixed: 'right', width: 115, align: 'center', toolbar: '#barDemo', title: '操作', templet: '#buttons', unresize: true
                }
            ]]
        });

        //监听工具条
        laytable.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.billNum + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('确定删除？', function (index) {
                    deleteBill(data.billNum);
                    obj.del();
                    layer.close(index);
                    laytable.reload('testReload', {
                        url: webPath + '/bill/queryBillList'
                        , where: {
                            "mealTime": $("#mealTime").val(),
                            "mealPersons": $("#mealPersons").val(),
                            "billAllPrice": $("#billAllPrice").val(),
                            "payer": $("#payer").val()
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                editBill(data.billNum,data.payAllPrice,data.reimbursementPrice);
                //layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });
    });

    function reset() {
        $("#mealTime").val("");
        $("#mealPersons").val("");
        $("#billAllPrice").val("");
        $("#payer").val("");
        window.location.reload();
    }

    function query() {
        var mealTime=$("#mealTime").val();
        var mealPersons= $("#mealPersons").val();
        var billAllPrice= $("#billAllPrice").val();
        var payer= $("#payer").val();
        if(!mealTime &&!mealPersons &&!billAllPrice &&!payer ){
            layer.open({
                title: '提示',
                content: '请先输入查询条件!'
            });
            return;
        }

        var laytable = layui.table;
        laytable.reload('testReload', {
            url: webPath + '/bill/queryBillList'
            , where: {
                "mealTime": $("#mealTime").val(),
                "mealPersons": $("#mealPersons").val(),
                "billAllPrice": $("#billAllPrice").val(),
                "payer": $("#payer").val()
            }
        });
    }

    function deleteBill(billNum) {
        $.ajax({
            url: webPath + "/bill/deleteBill",
            type: "post",
            //.serialize() 当提交多条表单数据时，我们可以采用当表单进行序列化的方式简化原有的操作
            data: {"billNum": billNum},
            dataType: "json",
            success: function (result) {
                if (result == "success") {
                    layer.msg('删除成功！');

                } else {
                    layer.msg('删除失败！');
                }
            }
        });
    }

    function addBill() {
        window.location.href = webPath + "/jsp/bill_add.jsp";
    }

    function editBill(billNum,payAllPrice,reimbursementPrice) {
        layer.open({
            type: 2,
            skin: 'layui-layer-demo', //样式类名
            title: '报销单' + billNum + '详情',
            anim: 2,
            area: ['800px', '500px'],
            shadeClose: true, //开启遮罩关闭
            content: webPath + "/jsp/bill_detail.jsp?billNum=" + billNum+"&payAllPrice="+payAllPrice+"&reimbursementPrice="+reimbursementPrice
        });
    }

</script>
</body>
</html>
